<template>
  <div id="allcash">
    <div class="section">
      <div class="title">
        <span>余额提现</span>
        <span @click="toPre">返回上一页</span>
      </div>
      <div class="content">
        <div class="first">
          <span>可提现金额</span>
          <span>{{outcash}}元</span>
          <span @click="out=true">查看提现记录</span>
        </div>
        <div class="seccond">
          <span class="ch_bank">选择银行卡</span>
          <ul class="ch">
            <li v-for="(item,index) in bank" :key="index" @click="selectbank(index)">
              <img :src="selectIndex === index ? notarize:cancel" alt />
              <span>{{item.bank_type}}&nbsp;&nbsp;&nbsp;尾号{{item.last_num}}</span>
            </li>
            <div class="add_bank">
              <span @click="add=true">+新增银行卡</span>
            </div>
          </ul>
        </div>
        <div class="need">
          <span>提现金额</span>
          <input type="text" placeholder="请输入提现金额" />
        </div>
        <div class="bot">
          <div class="confirm">
            <span>确认提现(次日到账)</span>
          </div>
        </div>
      </div>
      <!-- 弹窗之全部查看提现记录 -->
      <div class="cash_record" v-show="out">
        <div class="record_show">
          <!-- 展示所有提现记录 -->
          <div class="title">
            <span>提现记录</span>
            <span @click="out = false">
              <img src="../../assets/image/out.png" alt />
            </span>
          </div>
          <div class="show">
            <ul>
              <li v-for="(item,index) in record" :key="index">
                <div class="left">
                  <span class="cash">提现金额：{{item.how_cash}}</span>
                  <span class="state">提现状态：{{item.state_cash}}</span>
                  <span class="start">发起时间：{{item.start_time}}</span>
                </div>
                <div class="right">
                  <span class="bank">{{item.cash_bank}}</span>
                  <span class="end">{{item.end_time}}</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 新增银行卡的弹窗 -->
      <div class="a_bank" v-show="add">
        <div class="bank_content">
          <div class="top">
            <div class="title">
              <span>新增银行卡</span>
              <span @click="add = false">
                <img src="../../assets/image/out.png" alt />
              </span>
            </div>
            <div class="ipt">
              <div class="item">
                <span>开发银行：</span>
                <el-input v-model="input" placeholder="中国工商银行"></el-input>
              </div>
              <div class="item">
                <span>银行卡号：</span>
                <el-input v-model="input" placeholder="请输入银行卡号"></el-input>
              </div>
              <div class="item">
                <span>持卡人姓名：</span>
                <el-input v-model="input" placeholder="请输入持卡人姓名"></el-input>
              </div>
              <div class="item">
                <span>身份证号：</span>
                <el-input v-model="input" placeholder="请输入身份证号"></el-input>
              </div>
            </div>
          </div>
          <!-- 确定取消按键 -->
          <div class="confirmBtn">
            <span
              style="border-right:1px solid #ccc;display:flex;justify-content:center;"
              @click="add = false"
            >取消</span>
            <span style="color:#f03a58;display:flex;justify-content:center;" @click="successShow">确定</span>
          </div>
        </div>
      </div>
      <!-- 新增银行卡成功模态框 -->
      <div class="successfully" v-show="successfully">
        <!-- 成功小图标 -->
        <div class="successIcon">
          <img src="../../assets/image/1_1_2_icon_success.png" alt />
        </div>
        <span>新增银行卡成功！</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectIndex: -1, //选择银行
      cancel: require("../../assets/image/3_1_0_select_u.png"), //未选中时的小图标
      notarize: require("../../assets/image/3_1_0_select_s.png"), //选中时的小图标
      outcash: "250.0", //可提现金额
      bank: [
        {
          bank_type: "中国工商银行", //银行类型
          last_num: 3376 //银行卡尾号
        },
        {
          bank_type: "中国农业银行", //银行类型
          last_num: 7331 //银行卡尾号
        }
      ],
      successfully: false, //添加银行卡成功模态框
      input: "", //银行相关信息输入框
      out: false, //弹窗是否出现开关
      add: false, //新增银行卡是否出现开关
      record: [
        {
          how_cash: 200, //提现额度
          state_cash: "提现成功", //提现状态
          start_time: "2020-10-09 14:50:30", //发起时间
          end_time: "2021-04-09 04:50:30", //结束时间
          cash_bank: "中国工商银行（尾号XXXX）" //提现出处
        },
        {
          how_cash: 400, //提现额度
          state_cash: "处理中", //提现状态
          start_time: "2020-10-09 14:50:30", //发起时间
          end_time: "2021-04-09 04:50:30", //结束时间
          cash_bank: "中国工商银行（尾号XXXX）" //提现出处
        },
        {
          how_cash: 320, //提现额度
          state_cash: "提现成功", //提现状态
          start_time: "2020-10-09 14:50:30", //发起时间
          end_time: "2021-04-09 04:50:30", //结束时间
          cash_bank: "中国工商银行（尾号XXXX）" //提现出处
        },
        {
          how_cash: 320, //提现额度
          state_cash: "提现成功", //提现状态
          start_time: "2020-10-09 14:50:30", //发起时间
          end_time: "2021-04-09 04:50:30", //结束时间
          cash_bank: "中国工商银行（尾号XXXX）" //提现出处
        }
      ] //提现记录
    };
  },
  methods: {
    toPre() {
      this.$router.push({ path: "/personalCenter/manage" });
    },
    // 点新增银行卡模态框中的确定按钮，新增成功显示
    successShow() {
      this.successfully = true;
      this.add = false;
      setTimeout(() => {
        this.successfully = false;
      }, 2000);
    },
    // 选择银行
    selectbank(i) {
      this.selectIndex = i;
       
    }
  }
};
</script>

<style lang="scss" scoped>
.section {
  width: 940px;
  height: 480px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 5px 0px rgba(204, 196, 196, 0.15);
  .title {
    height: 50px;
    border-bottom: 1px solid rgba(230, 230, 230, 1);
    display: flex;
    align-items: center;
    & span:nth-of-type(1) {
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      margin-left: 20px;
    }
    & span:nth-of-type(2) {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      margin-left: 20px;
      cursor: pointer;
    }
  }
  .content {
    .first {
      margin-top: 20px;
      margin-left: 20px;
      height: 60px;
      display: flex;
      align-items: center;
      & span:nth-of-type(1) {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
      }
      & span:nth-of-type(2) {
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        margin-left: 18px;
      }
      & span:nth-of-type(3) {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(240, 58, 88, 1);
        margin-left: 50px;
        cursor: pointer;
      }
    }
    .seccond {
      margin-top: 20px;
      display: flex;
      height: 160px;
      .ch_bank {
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        margin-left: 20px;
      }
      .ch {
        list-style: none;
        margin-top: 3px;
        li {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          img {
            margin-right: 10px;
          }
          span {
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(77, 77, 77, 1);
          }
        }
        .add_bank {
          margin-top: 20px;
          span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 32px;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(254, 44, 74, 1);
            border-radius: 10px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(254, 44, 74, 1);
            cursor: pointer;
          }
        }
      }
    }
    .need {
      span {
        margin-left: 20px;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
      }
      input {
        //   display: inline-block;
        margin-left: 20px;
        padding: 10px 0;
        width: 280px;
        outline: none;
        border: none;
        border-bottom: 1px solid rgba(204, 204, 204, 1);
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
      }
    }
    .bot {
      margin-top: 38px;
      display: flex;
      justify-content: center;
      .confirm {
        width: 240px;
        height: 60px;
        background: rgba(240, 58, 88, 1);
        border-radius: 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }
  // 查看提现记录的弹窗最外层蒙层
  @mixin out_box {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
  }
  // 查看提现记录 中间白色盒子
  @mixin center_box {
    width: 500px;
    height: 400px;
    background: rgba(255, 255, 255, 1);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  // 新增银行卡的弹窗最外层蒙层
  @mixin add_out_box {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
  }
  // 新增银行卡中间白色盒子
  @mixin add_center_box {
    width: 500px;
    height: 368px;
    background: rgba(255, 255, 255, 1);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  //确定、取消按键内容盒
  @mixin confirmBtn {
    height: 45px;
    margin-top: 25px;
    border-top: 1px solid #ccc;
    display: flex;
    span {
      flex: 1;
      line-height: 45px;
      cursor: pointer;
    }
  }
  //新增银行卡成功模态框
  .successfully {
    width: 180px;
    height: 100px;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 10px;
    color: #fff;
    letter-spacing: 1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    // 修改成功小图标
    .successIcon {
      width: 30px;
      height: 30px;
      margin: 15px auto;
    }
  }
  //查看提现记录的样式表
  .cash_record {
    @include out_box();
    .record_show {
      @include center_box();
      padding: 0 10px;
      box-sizing: border-box;
      .title {
        margin-top: 6px;
        height: 40px;
        border-bottom: 1px solid rgba(230, 230, 230, 1);
        display: flex;
        align-items: center;
        justify-content: space-between;
        span {
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
        }
        & span:nth-of-type(2) {
          width: 16px;
          height: 16px;
          margin-right: 32px;
          margin-bottom: 2px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .show {
        padding: 16px 18px;
        height: 100%;
        ul {
          margin-top: -10px;
          list-style: none;
          padding: 0;
          height: 310px;
          display: block;
          overflow: auto;
          overflow-x: hidden;
          box-sizing: border-box;
          li {
            padding: 10px;
            box-sizing: border-box;
            width: 420px;
            height: 88px;
            background: rgba(245, 245, 245, 1);
            border-radius: 5px;
            margin: 12px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left {
              flex: 1;
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .cash {
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(77, 77, 77, 1);
              }
              .state {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(128, 128, 128, 1);
              }
              .start {
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(128, 128, 128, 1);
              }
            }
            .right {
              flex: 1;
              display: flex;
              flex-direction: column;
              padding-left: 20px;
              .bank {
                font-size: 15px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(77, 77, 77, 1);
                margin-top: -18px;
              }
              .end {
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(128, 128, 128, 1);
                margin-top: 6px;
              }
            }
          }
        }
      }
    }
  }
  // 新增银行卡的样式表
  .a_bank {
    @include add_out_box();
    .bank_content {
      @include add_center_box();
      // padding: 10px 14px;
      .top {
        padding: 10px;
        box-sizing: border-box;
        .title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;

          & span:nth-of-type(1) {
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
          }
          & span:nth-of-type(2) {
            width: 14px;
            height: 14px;
            margin-right: 32px;
            margin-bottom: 2px;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .ipt {
          .item {
            margin: 12px 0;
            display: flex;
            align-items: center;
            margin-left: 30px;
            span {
              display: block;
              width: 140px;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: rgba(77, 77, 77, 1);
            }
          }
        }
      }
      // 确定、取消按键
      .confirmBtn {
        @include confirmBtn();
      }
    }
  }
}
// 修改新增银行卡input框的样式
::v-deep .el-input__inner {
  width: 300px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(230, 230, 230, 1);
  border-radius: 5px;
}
//  .el-input__inner,
.el-input__inner:focus ::v-deep .el-input.is-active {
  outline: none;
  // border: none;
}
</style>